<template>
    <view class="container">
        <view class="part-one">
            <img class="po-img" src="" alt="">
        </view>
        <view class="part-two">
            <view class="pt-title">派车中</view>
            <view class="pt-item-box">
                <img class="pt-item-img" src="@/static/icon/common/nav.png" alt="">
                <view class="pt-item-text">{{ '起点: '+form.start }}</view>
            </view>
            <view class="pt-item-box">
                <img class="pt-item-img" src="@/static/icon/common/nav.png" alt="">
                <view class="pt-item-text">{{ '终点: '+form.end }}</view>
            </view>
            <view class="pt-item-box">
                <img class="pt-item-img" src="@/static/icon/common/car.png" alt="">
                <view class="pt-item-text">{{ '车型: '+form.car }}</view>
            </view>
            <view class="pt-item-box">
                <img class="pt-item-img" src="@/static/icon/common/clock.png" alt="">
                <view class="pt-item-text">{{ '预计到达时间: '+form.time +'分钟'}}</view>
            </view>
            <view class="pt-item-box">
                <img class="pt-item-img" src="@/static/icon/common/phone.png" alt="">
                <view class="pt-item-text">{{ '司机电话: '+form.phone }}</view>
            </view>
  
        </view>
        <view class="part-three">
            <view class="pt-item">联系志愿者先过来</view>
            <img style="width: 25rpx;
height: 40rpx;" src="@/static/icon/common/arrow-right.png" alt="">
        </view>
    </view>
  </template>
  
  <script setup>
  import { ref, onMounted, toRefs } from 'vue'
  let form = ref({
 start:'15路12号',
 end:'15路12号',
 car:'小型救护车',
 time:'15',
 phone:'13729888888'

  })
  
  //取消
  let cancel = () => {
    uni.navigateBack()
  }
  let edit =()=>{
      uni.navigateTo({ url: '/pages/me/components/personaledit' })
  }
  </script>
  
  <style scoped>
.container{
    background-color: #fff;
}
.po-img{
    left: 0px;
top: 0px;
width: 712rpx;
height: 300rpx;
margin: auto;
border-radius: 15rpx;
opacity: 1;
background: url(https://img.js.design/assets/img/648c0d0339452792f9f32974.png);
display: flex;

}
.part-two{
    width: 712rpx;
    border-radius: 15rpx;
    text-align: center;
    margin: auto;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
}
.pt-title{
    border-radius: 15rpx;
    text-align: center;
    font-size: 32rpx;
font-weight: 900;
letter-spacing: 0px;
line-height: 86rpx;
color: rgba(255, 255, 255, 1);
background: linear-gradient(180deg, rgba(99, 102, 241, 1) 0%, rgb(255, 255, 255) 100%);

height: 96rpx;

vertical-align: middle; 
}
.pt-item-img{
    width: 24rpx;
height: 32rpx;
display: inline;
}
.pt-item-text{
    line-height: 40rpx;

    font-size: 28rpx;
    margin-left: 16rpx;
}
.pt-item-box{
    display: flex;
    align-items: center;

    text-align: center;
    margin: auto;
    margin-left: 30%;
    margin-top: 16rpx;
}
.pt-item{



text-align: left;
flex:5;

}
.part-three{
    background: rgba(243, 244, 246, 1);
    margin: auto;
    left: 0px;

opacity: 1;
border-radius: 15rpx;
    padding: 0px 24rpx 0px 24rpx;
color: rgba(107, 114, 128, 1);
width: 712rpx;
height: 104rpx;
    display: flex;

align-items: center;
}
  </style>
  